<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<!-- form 表单 action 用于定义提交地址 method 定义提交方式 参数 GET用于请求，不安全，
    因为我们的请求信息会展示在我们的地址栏中
    参数 POST 用于请求，请求信息不展示在地址栏中，相对安全（前端没有绝对的安全）
    -->
    <form action="index" method="get" name="user" >
        <!--text默认文本框-->
        用户名: <input type="text" name="username" list="datalist" maxlength="6" placeholder="提示信息"> <br> <!-- readonly 处于只读状态-->
        <!--password 密码框 对文本信息展示隐藏-->
        密码：<input type="password" list="password"> <br>
        <!--radio 单选框 name属性用于将radio标签分组的，name的参数值相同的为一组-->
        性别：<label><input type="radio" name="sex">男性</label>
        <input id="women" type="radio" name="sex"> <label for="women">女性</label> <br>
        <!--label用于实现文字点击 产生单选框或复选框聚焦效果-->
        爱好：<input type="checkbox">LOL <input type="checkbox">bilibili
        <input type="checkbox">王者荣耀 <input type="checkbox">篮球 <br>
        <!--按钮-->
        <!--普通按钮 button-->
        <input type="button" value="普通按钮" onclick="buttonClick()">
        <!--提交按钮 submit-->
        <input type="submit">
        <!--重置按钮-->
        <input type="reset">
        <!--button标签 具备提交按钮-->
        <button>普通按钮</button>
<!--        提交图片按钮，具备提交功能 type="image"-->
        <input type="image" src="psc.jpg" width="100" height="50">
<!--        文件域 文件上传-->
        <input type="file" name="file"><br>
<!--        时间组件-->
        时间组件：<input type="date">
        <input type="datetime-local"><br>
<!--        颜色组件-->
        颜色组件：<input type="color"><br>
<!--        拖动条-->
        拖动条组件：<input type="range" value="50" min="0" max="100"><br>
<!--        数字组件-->
        数字组件：<input type="number" step="3"><br>
<!--        邮箱-->
        邮箱：<input type="email"><br>
<!--        网址-->
        网页组件：<input type="url" readonly><br>
<!--        电话-->
        电话组件：<input type="tel"><br>
        
<!--        隐藏域 用于网页埋点-->
        隐藏域：<input type="hidden" value="123456" name="hidden">
<!--        搜索框-->
        搜索框： <input type="search">
        <datalist id="datalist">
            <option value="张三"></option>
            <option value="李四"></option>
            <option value="王五"></option>
        </datalist>
        <datalist id="password">
            <option value="$1277512167"></option>
        </datalist>
    </form>
</body>
<script>
    function buttonClick(){
        alert("点击了普通按钮")
    }
</script>
</html>